<template>
  <!-- 垫砖石 -->
  <div class="blank"></div>
  <van-tabbar v-model="active" @change="changeTab">
    <van-tabbar-item :name="tab.path" :icon="tab.meta && tab.meta.icon? tab.meta.icon : 'home-o'"
        v-for="tab in tabbar" :key="tab.path"
    >{{tab.meta && tab.meta.title? tab.meta.title : ''}}</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
const router = useRouter();

// 收集路由
import {
  collectModules,
  collectRouterByObject,
  collectRouterByArray,
  collectTabbar
} from "@/utils/routerCollecter.ts";

// 获取所有动态路由
const asyncModules: {
  [index: string]: {default: any}
} = import.meta.glob("@/router/asyncModules/*.ts", { eager: true });
// 整理好模块
const _modules = collectModules(asyncModules);
import {ModuleType} from "@/types/utils/routerCollecter";
// 用JSON.parse为了解决各种ts神经病的问题
const asyncRouters = collectRouterByObject(JSON.parse(JSON.stringify(_modules)) as ModuleType);

// 获取静态路由
import constantsRouter from "@/router/constants.ts";
// 整理好静态路由
const constants_Router = collectRouterByArray(constantsRouter);

// 所有路由
const allRouters = [...constants_Router, ...asyncRouters];
const tabbar = collectTabbar(allRouters);
// 使用路由获取当前路径
const route = useRoute();
// 获取高亮路由
const active = ref<string>(route.path);

// 切换tab
function changeTab(activePage: number | string) {
  // 以fullpath作为是否跳转的依据
  const thisPath = route.fullPath;
  if(typeof activePage === 'string' && activePage !== thisPath) {
    active.value = activePage;
    router.push(activePage);
  }
  else if(typeof activePage === "number" && thisPath !== tabbar[activePage].path) {
    active.value = tabbar[activePage].path;
    router.push(tabbar[activePage].path);
  }
}

</script>

<style scoped lang="less">
// 垫砖石
.blank{
  height: var(--van-tabbar-height);
  width: 100vw;
}
v-deep{
 .van-tabbar--fixed {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
 }
}
</style>